<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公交站点高峰期客流排行 - Apache ECharts</title>
    <link rel="stylesheet" href="css/style.css?v=1.1">
</head>

<body>
    <div class="navbar">
        <a href="index.html">首页</a>
        <a href="traffic_trend.html">客流趋势分析</a>
        <a href="station_ranking.html">站点客流排行</a>
        <a href="funnel_analysis.html">线路站点客流分析</a>
        <a href="line_comparison.html">线路客流量对比</a>
        <a href="transfer_heatmap.html">换乘热度分析</a>
        <a href="poi_analysis.html">站点周边客流特征</a>
        <a href="anomaly_detection.html">异常客流检测</a>
        <a href="od_analysis.html">路径OD分析</a>
        <a href="stop_frequency_usage_analysis.html">站停频率分析</a>
        <a href="dispatch_suggestion.html">智能调度模型</a>
    </div>
    <div class="page-container">
        <div class="chart-header">
            <h2 class="chart-title">公交站点高峰期客流排行</h2>
            <p class="chart-description">
                此图表展示了在早晚高峰期，客流量排名前15位的公交站点。通过对比各站点的高峰期客流数据，可以识别出关键的通勤集散地，为线路优化和运力调配提供依据。
            </p>
        </div>
        <div class="kpi-cards-container">
            <div class="kpi-card">
                <h4>客流总冠军</h4>
                <p id="top-total-station">--</p>
            </div>
            <div class="kpi-card">
                <h4>上车之王</h4>
                <p id="top-onboard-station">--</p>
            </div>
            <div class="kpi-card">
                <h4>下车之王</h4>
                <p id="top-offboard-station">--</p>
            </div>
            <div class="kpi-card">
                <h4>客流差异最大站点</h4>
                <p id="top-diff-station">--</p>
            </div>
        </div>
        <div id="main" style="width: 100%; height:600px;"></div>
    </div>

    <script src="js/echarts.min.js"></script>
    <script type="text/javascript">
        var poiChart = echarts.init(document.getElementById('main'));

        fetch('/api/bus/rush_hour_traffic')
            .then(response => response.json())
            .then(data => {

                // Aggregate data by station name
                const stationTotals = {};
                data.forEach(item => {
                    if (!stationTotals[item.stationName]) {
                        stationTotals[item.stationName] = { onboard: 0, offboard: 0 };
                    }
                    stationTotals[item.stationName].onboard += item.onboard;
                    stationTotals[item.stationName].offboard += item.offboard;
                });

                // Convert to array, calculate total, and sort
                const sortedStations = Object.entries(stationTotals)
                    .map(([name, counts]) => ({
                        name: name,
                        onboard: counts.onboard,
                        offboard: counts.offboard,
                        total: counts.onboard + counts.offboard
                    }))
                    .sort((a, b) => b.total - a.total)
                    .slice(0, 15); // Get top 15

                const stationNames = sortedStations.map(s => s.name);
                const onboardData = sortedStations.map(s => s.onboard);
                const offboardData = sortedStations.map(s => s.offboard);

                // --- KPI Card Calculations ---
                if (sortedStations.length > 0) {
                    // 1. 客流总冠军 (already the first element due to sorting by total)
                    const topTotalStation = sortedStations[0];
                    document.getElementById('top-total-station').textContent = `${topTotalStation.name}: ${topTotalStation.total}人次`;

                    // 2. 上车之王
                    const topOnboardStation = [...sortedStations].sort((a, b) => b.onboard - a.onboard)[0];
                    document.getElementById('top-onboard-station').textContent = `${topOnboardStation.name}: ${topOnboardStation.onboard}人`;

                    // 3. 下车之王
                    const topOffboardStation = [...sortedStations].sort((a, b) => b.offboard - a.offboard)[0];
                    document.getElementById('top-offboard-station').textContent = `${topOffboardStation.name}: ${topOffboardStation.offboard}人`;

                    // 4. 客流差异最大站点
                    const topDiffStation = [...sortedStations]
                        .map(s => ({ ...s, diff: Math.abs(s.onboard - s.offboard) }))
                        .sort((a, b) => b.diff - a.diff)[0];
                    document.getElementById('top-diff-station').textContent = `${topDiffStation.name}: 差异 ${topDiffStation.diff}人`;
                }
                // --- End of KPI Card Calculations ---

                var option = {
                    title: {
                        text: '高峰期客流量Top 15公交站点',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['上车人数', '下车人数'],
                        top: '8%'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: stationNames,
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '客流量 (人次)'
                    },
                    series: [
                        {
                            name: '上车人数',
                            type: 'bar',
                            data: onboardData,
                            itemStyle: { color: '#5470C6' }
                        },
                        {
                            name: '下车人数',
                            type: 'bar',
                            data: offboardData,
                            itemStyle: { color: '#91CC75' }
                        }
                    ]
                };
                poiChart.setOption(option);
            })
            .catch(error => console.error('获取公交高峰期客流数据失败:', error));

        window.addEventListener('resize', function () {
            poiChart.resize();
        });
    </script>
    <script src="js/common.js"></script>
</body>

</html>